<template>
  <div class="text-link">
    <div class="grid-container">
      <template v-for="(item, index) in textArrs" :key="index">
        <div class="item">
          <span class="title">{{ item.title }}</span>
          <el-link type="primary" class="content">{{ item.desp }}</el-link>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  textArrs: {
    type: Array,
    default: () => [],
  },
})
</script>

<style scoped lang="scss">
.text-link {
  padding: 0 15px;
  margin-bottom: 40px;

  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 15px 30px;
  }

  .item {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    min-height: 32px;
    padding: 5px 10px;
    background-color: var(--el-bg-color-page);
    border-radius: 4px;
  }

  .title {
    position: relative;
    padding-left: 15px;
    font-weight: 500;
    color: var(--el-text-color-regular);
    white-space: nowrap;

    &::before {
      position: absolute;
      top: 50%;
      left: 0;
      width: 5px;
      height: 5px;
      background: var(--el-color-primary);
      border-radius: 50%;
      content: '';
      transform: translateY(-50%);
    }
  }

  .content {
    line-height: 1.5;
    word-break: break-all;
  }
}
</style>
